import React from 'react';

import { Router, Switch, Route, Redirect } from 'react-router-dom';
import AuthRoute from './components/AuthRoute';
import KeepAlive from './components/KeepAlive';
import './index.scss';
import Article from './pages/Article';
import NotFound from './pages/NotFound';
import Chat from './pages/Profile/Chat';
import ProfileEdit from './pages/Profile/Edit';
import ProfileFeedback from './pages/Profile/Feedback';
import Search from './pages/Search';
import SearchResult from './pages/Search/Result';
import Test from './pages/Test';
import history from './utils/history';

const Layout = React.lazy(() => import('@/pages/Layout'));
const Login = React.lazy(() => import('@/pages/Login'));
export default function App() {
  return (
    <Router history={history}>
      <React.Suspense fallback={<div>...加载中...</div>}>
        <KeepAlive path="/layout" component={Layout} />
        <Switch>
          <Redirect from="/" to="/layout/home" exact></Redirect>
          <Route path="/login" component={Login} />
          <Route path="/test" component={Test} />

          <Route path="/login" component={Login} />
          <Route path="/search/result" component={SearchResult} />
          <Route path="/search" component={Search} />
          <Route path="/article/:id" component={Article} />

          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />

          <Route
            render={(props) => {
              if (props.location.pathname.startsWith('/layout')) {
                return null;
              } else {
                return <NotFound />;
              }
            }}
          />
        </Switch>
      </React.Suspense>
    </Router>
  );
}
